<template>
	<view class="container">
		<view style="background-color: #F0250E; height: 60rpx;"></view>
		<view class="wrap">
			<u-image :lazy-load="false" width="100%" height="230rpx" :src="backgroundImg" mode="aspectFill"></u-image>
			<!-- 进行中的奖金池展示区域 -->
			<view class="header">
				<view class="date">
					<text>{{bonusPoolInfo.time_str}} | {{bonusPoolInfo.remaining_day > 0 ? '进行中' : '已结束'}}</text>
				</view>
				<view class="title">
					奖池{{formatNum(bonusPoolInfo.number)}}期
				</view>
				<view class="number-info">
					<view class="people">
						<text>
							参与 {{bonusPoolInfo.pool_peopel_count}}人
						</text>
					</view>
					<view class="people">
						<text>
							报单 {{bonusPoolInfo.pool_order_count}}人
						</text>
					</view>
				</view>
			</view>
		</view>
			<!-- 本轮奖池信息 -->
			<view class="bg-wrap">
				<view class="current-pool-info" >
					<view class="item">
						<text class="bonus-total"><text style="font-size: 46rpx; margin-right:8rpx;">{{bonusPoolInfo.pool_bonus}}</text> <text>元</text></text>
						<text class="credit-total">{{bonusPoolInfo.pool_integral_sum}}</text>
					</view>
					<view class="item">
						<view class="desc">
							<text>奖金池累计奖金</text>
							<text>奖金池累计积分</text>
						</view>
					</view>
					<view class="item">
						<text style="color: #262626; font-size: 24rpx;">本轮奖池 还有{{bonusPoolInfo.remaining_day}}天结束</text>
					</view>
				</view>
			</view>
			<!-- 参与记录 -->
			<scroll-view @scrolltolower="handleScrollTolwer" style="min-height: 62vh; background: #F2F2F2;">
				<view class="join-history">
					<view class="title">
						参与记录
					</view>
					<view class="item" v-for="item in bonusPoolInfo.data" :key="item.id">
						<view class="item-date">
							<text>奖池{{formatNum(item.number)}}期 {{item.time_str}}</text>
							<text :class="item.is_send == 0 ? 'send-red' : 'send-color'">{{item.is_send == 0 ? '待发放' : '已发放'}}</text>
						</view>
						<view class="item-content">
							<view class="c-item">
								<view class="size-color">
									报单次数
								</view>
								<view class="c-count">
									{{item.report_num}}
								</view>
							</view>
							<view class="c-item">
								<view class="size-color">
									积分奖励
								</view>
								<view class="c-count">
									{{item.report_integral}}
								</view>
							</view>
							<view class="c-item">
								<!-- 奖励金额 -->
								<view class="size-color">
									{{item.is_send == 0 ? '预奖励金额' : '奖励金额'}}
								</view>
								<view class="c-count">
									{{item.report_money}}
								</view>
							</view>
						</view>
						<view class="size-color">
							<text>{{item.is_send == 0 ? '预计' + item.send_time + '发放' : item.send_time}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
	</view>
</template>

<script>
	import {getBonusPoolList} from '@/global/api/report.js'
	import backgroundImg from '../static/image/pool.png'
	export default {
		data() {
			return {
				page: 1,
				bonusPoolInfo: {},
				backgroundImg,
				
				pageNo: 1
			}
		},
		onLoad(options) {
			console.log('opti',options)
			uni.hideTabBar()
			if (options.id) {
				const id = options.id
				this.getBonusPoolListAPI(id)
			}
		},
		methods: {
			async getBonusPoolListAPI(pool_id) {
				const params = {
					pool_id,
					page: this.page
				}
				console.log(params,'da')
				const res = await getBonusPoolList(params)
				this.bonusPoolInfo =res.data
				this.pageNo = res.data.pageNo
				console.log(res)
			},
			handleScrollTolwer() {
				if (this.pageNo == this.page) return;
				this.page += 1
				this.getBonusPoolListAPI(pool_id)
			},
			// 格式化奖金池期数
			formatNum(num) {
				const n = Number(num)
				if (n < 10) {
					return '00' + num
				} else if (n >= 10 && n < 100) {
					return '0' + num
				} else {
					return num
				}
			}
		} 
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F2F2F2;
		height: 100vh;
		.wrap {
			position: relative;
			// padding: 0rpx 0 20rpx;
			// background-image: url('@/global/image/pool.png');
			// background-image: url("");
			// background-repeat: no-repeat;
			// background-size: 100% 100%;
			.header {
				padding: 24rpx;
				position: absolute;
				top: 28px;
				.date {
					font-size: 24rpx;
					color: #FFF;
				}
				.title {
					font-size: 40rpx;
					color: #FFF;
					margin: 10rpx 0 20rpx 0;
				}
				.number-info {
					display: flex;
					.people {
						text-align: center;
						line-height: 25px;
						width: 156rpx;
						height: 46rpx;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 10rpx;
						margin-right: 10rpx;
						color: #fff;
					}
				}
			}
			
		}
			.bg-wrap {
				background: linear-gradient( 180deg, #F0250E 0%, #F2F2F2 100%);
				padding-top: 40rpx;
			}
			.current-pool-info {
				background-color: #fff;
				margin: 0 24rpx 30rpx;
				padding: 24rpx;
				border-radius: 31rpx;
				.item {
					display: flex;
					justify-content: space-between;
					.bonus-total {
						color: red;
						font-weight: bold;
					}
					.credit-total {
						color: #262626;
						font-weight: bold;
						font-size: 30rpx;
						display: block;
						width: 160rpx;
						line-height: 60rpx;
					}
					.desc {
						display: flex;
						width: 100%;
						justify-content: space-between;
						margin:12rpx 0 20rpx;
						color: #8C8C8C;
						font-size: 24rpx;
					}
				}
			}
			.join-history {
				background-color: #fff;
				padding: 30rpx 20rpx;
				margin: 0 24rpx;
				border-radius: 18rpx;
				.size-color {
					font-size: 24rpx;
					color: #8C8C8C;
				}
				.title {
					font-weight: bold;
					color: #262626;
					font-size: 30rpx;
					margin-bottom: 24rpx;
				}
				.item {
					margin-bottom: 20rpx;
					border-bottom: 3px solid #F8F8F8;
					padding-bottom: 20rpx;
				}
				.item-date {
					display: flex;
					justify-content: space-between;
					color: #262626;
					font-size: 26rpx;
					.send-color {
						color: #8C8C8C;
					}
					.send-red {
						color: #F0250E;
					}
				}
				.item-content {
					display: flex;
					justify-content: space-around;
					height: 140rpx;
					background: #f5f5f5;
					border-radius: 14rpx;
					padding: 10rpx 20rpx;
					margin: 24rpx 0;
					.c-item {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						width: 200rpx;
						text-align: center;
						.c-title {}
						.c-count {
							font-weight: bold;
						}
					}
				}
				.item-end {
					
				}
			}
	}
</style>
